<template>
  <view class="chatMessage mb-10">
      <!--<view v-if="align && align == 'right'">-->
      <!--</view>-->
      <view class="flex" :style="{flexDirection: align && align == 'right' ? 'row-reverse' : 'row'}">
        <view class="chatMessage-header">
          <img v-if="headerImg" :src="headerImg" style="width: 50rpx;height: 50rpx;">
        </view>
        <view class="chatMessage-triangle-top-left" :style="{margin: align && align == 'right' ? '20rpx 2rpx 0rpx 0rpx' : '20rpx 0rpx 0rpx 2rpx', borderRight: align && align == 'right' ? '4rpx solid transparent' : '', borderLeft: align && align == 'right' ? '' : '4rpx solid transparent'}">
          <view class="chatMessage-triangle-top-left2"  :style="{borderRight: align && align == 'right' ? '4rpx solid transparent' : '', borderLeft: align && align == 'right' ? '' : '4rpx solid transparent'}"></view>
        </view>
        <view class="chatMessage-content" :style="{maxWidth: messageMaxWidth ? messageMaxWidth : '400rpx', backgroundColor: align && align == 'right' ? '#95ec69' : ''}">
          <view v-html="content ? content : '   '" class="p-5"></view>
        </view>
        <slot name="right"></slot>
      </view>
  </view>
</template>
<script>
  export default {
    props: {
      align: String,
      headerImg: String,
      content: String,
      messageMaxWidth: String
    },
  }
</script>
<style lang="less" scoped>
  .chatMessage {
    &-header {
      width: 50rpx;
      height: 50rpx;
    }
    &-triangle-top-left {
      position: relative;
      border-top: 4rpx solid #DCDFE6;
    }
    &-triangle-top-left2 {
      top: -2rpx;
      left: 0rpx;
      position: absolute;
      border-top: 4rpx solid #ffffff;
    }

    .triangle-top-right2 {
      top: -2rpx;
      right: 0rpx;
      position: absolute;
      border-top: 4rpx solid #ffffff;
      border-right: 4rpx solid transparent;
    }

    &-content {
      text-align: justify;
      border-radius: 8rpx;
      padding: 16rpx;
      border: 1rpx solid #DCDFE6;
      font-size: 28rpx;
      line-height: 32rpx;
      margin-top: 20rpx;
      white-space: pre-wrap;
    }
  }
</style>
